<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/diyUpload/css/webuploader.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/diyUpload/css/diyUpload.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/diyUpload/js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/diyUpload/js/diyUpload.js"></script>
</head>
<style>
*{ margin:0; padding:0;}
#select_data{
 margin:0px auto;
 margin-top：50px;
  width:540px;
   min-height:120px;
    background:#4f4f4f;
     font-size: 15px;
      color: white;
       text-align: center;
}
ul li{
    list-style: none;

}

#select_cate{
  width: 150px;
}
.ul_one li{
  float: left;
}
.ul_two li{
  float: left;
}
.clear{
   clear: both;
}
#demo{ margin:0px auto; width:540px; background:#4f4f4f}
#ul_one{
 width: 540px;
 height:60px;
 background-color: red;
 border:solid 1px white;
 line-height: 60px;
}
#ul_two{
 width: 540px;
 height:60px;
 background-color: gray;
 border:solid 1px white;
 line-height: 60px;
}
#ul_three{
 width: 170px;
 height:41px;
 background-color: #4f4f4f;
}
#select_file{
       height: 41px;
    width: 94px;
    font-size:16px;
    background-color: black;
    overflow: hidden;
    line-height: 41px;
    background-color: #00B7EE;
    border-radius:3px;
    float: left;
}
#tip{
    width: 190px;
    line-height: 41px;
    height: 41px;
    cursor:pointer;
    background-color: #4f4f4f;
}
</style>
<body>
    <div id="select_data">
					<div id="ul_one">
					<ul class="ul_one">
						<li class="label">数据格式:</li>
						<li><select name="data_cat" id="data_cat">
								<option value="0">Excel</option>
								<option value="1">doc</option>
								<option value="1">txt</option>
						</select>
						</li>
					</ul>
					</div>
			<hr class="clear" />
					<div id="ul_two">
					<ul class="ul_two">
						<li >所属分类：</li>
						<li><select id="select_cate">
								<option>选择种类</option>
						</select>
						</li>
					</ul>
					</div>
				<hr class="clear" />
					<div id="ul_three">
					<ul class="ul_three">
						<li><div id="select_file">选择文件</div><div id="tip"></div></li>
					</ul>
					</div>
    </div>
<div id="demo">
	<div id="as" ></div>
</div>

</body>
<script type="text/javascript">
$(function(){
$.getJSON("../CategoryServlet?method=quaryAllCaregoryName", {},
		function(data) {
			$.each(data,
					function(index, element) {
						$("#select_cate").append(
								"<option>" + element.catname
										+ "</option>");
					});

		});
$("#select_cate").change(function() {
	var value = $(this).val();
	$("#src_goods_lists").append("<option>" + value + "</option>");
	$.getJSON("../GoodsServlet?method=fileEnter&cate="+value,{},function(data){
		if (data=="0") {
			$('#as').diyUpload({
				url:'../GoodsServlet?method=fileEnters&cate='+value,
				success:function( data ) {
					console.info( data );
				},
				error:function( err ) {
					console.info( err );	
				},
				buttonText : '选择文件',
				chunked:true,
				// 分片大小
				chunkSize:512 * 1024,
				//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
				fileNumLimit:50,
				fileSizeLimit:500000 * 1024,
				fileSingleSizeLimit:50000 * 1024,
				accept: {}
			});
			$("#ul_three").css("display","none");
		}
		if (data=="1") {
			alert("不存在该分类，请重新选择!");
		}
	})
	
});
$("#ul_three").click(function(){
	   $("#tip").text("请选择分类");
})
})
</script>
</body>
</html>